<script setup>
import { ref, onMounted } from 'vue'
import { queryStuApi } from '@/api/stu';
import { queryClazzByIdApi } from '@/api/clazz';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router=useRouter();

onMounted(()=>{
  search().then(()=>{
    searchHasSelected();
});
});

const degree=ref([{value:1,name:'初中'},{value:2,name:'高中'},{value:3,name:'大专'},{value:4,name:'本科'},
  {value:5,name:'硕士'},{value:6,name:'博士'},{value:7,name:'无'}
]);
const studentInfo = ref({
  name: '',
  no: '',
  gender: '',
  phone: '',
  degree: '',
  isCollege: '',
  address: '',
  violationCount: '',
  violationScore: '',
  clazzId: '',
  clazzName:''
})

const search= async ()=>{
  if(localStorage.getItem('Student')){
     const Student=JSON.parse(localStorage.getItem('Student'));
     let id=Student.id;
     const result = await queryStuApi(id);
    if(result.code){
      studentInfo.value=result.data;
      studentInfo.value.isCollege = studentInfo.value.isCollege==1 ? true : false;
      studentInfo.value.degree=degree.value.find(item=>item.value==studentInfo.value.degree).name;
    }
  }else{
    ElMessage.error('请先登录');
    router.push('/stulogin');
  }
};

const searchHasSelected= async ()=>{
  const clazzId=studentInfo.value.clazzId;
  const result=await queryClazzByIdApi(clazzId);
  if(result.code){
    if(result.data.status==='已开课'){
      localStorage.setItem('hasSelected',true);
    }
  }
};

</script>

<template>
    <div class="personal-center">
    <el-container>
      <!-- 头部标题 -->
      <el-header class="header">
        <h1>学生个人信息中心</h1>
      </el-header>

      <!-- 主体内容 -->
      <el-main>
        <el-row :gutter="30">
          <!-- 左侧信息列 -->
          <el-col :span="14">
            <el-card class="info-card">
              <template #header>
                <div class="card-header">
                  <span>基本信息</span>
                </div>
              </template>

              <el-form label-position="left" label-width="120px">
                <el-form-item label="姓名：">
                  <el-tag type="info">{{ studentInfo.name }}</el-tag>
                </el-form-item>

                <el-form-item label="学号：">
                  <div class="info-content">{{ studentInfo.no }}</div>
                </el-form-item>

                <el-form-item label="性别：">
                  <el-icon :color="studentInfo.gender === 1 ? '#409EFF' : '#F56C6C'">
                    <component :is="studentInfo.gender === 1 ? 'Male' : 'Female'"/>
                  </el-icon>
                </el-form-item>

                <el-form-item label="手机号：">
                  <div class="info-content">{{ studentInfo.phone }}</div>
                </el-form-item>

                <el-form-item label="学历：">
                  <el-tag effect="dark">{{ studentInfo.degree }}</el-tag>
                </el-form-item>

                <el-form-item label="是否在校：">
                  <el-switch
                    v-model="studentInfo.isCollege"
                    active-color="#67C23A"
                    inactive-color="#909399"
                    disabled
                  />
                </el-form-item>

                <el-form-item label="联系地址：">
                  <el-input
                    type="textarea"
                    :rows="2"
                    v-model="studentInfo.address"
                    readonly
                  />
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>

          <!-- 右侧统计列 -->
          <el-col :span="10">
            <el-card class="stats-card">
              <template #header>
                <div class="card-header">
                  <span>违规记录</span>
                </div>
              </template>

              <div class="stats-item">
                <div class="stats-label">违纪次数</div>
                <div class="stats-value text-danger">{{ studentInfo.violationCount }}</div>
              </div>

              <el-divider/>

              <div class="stats-item">
                <div class="stats-label">违纪分数</div>
                <div class="stats-value text-primary">{{ studentInfo.violationScore }}</div>
              </div>

              <el-divider/>

              <div class="stats-item">
                <div class="stats-label">当前所属班级</div>
                <div class="class-info">
                  <el-tag type="success" effect="light">
                    {{ studentInfo.clazzName }}
                  </el-tag>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.personal-center {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  background-color: #2c3e50;
  color: white;
  display: flex;
  align-items: center;
  font-size: 24px;
}

.info-card, .stats-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.card-header {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.info-content {
  font-size: 16px;
  color: #606266;
}

.stats-item {
  padding: 15px 0;
  text-align: center;
}

.stats-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stats-value {
  font-size: 28px;
  font-weight: bold;
}

.text-danger {
  color: #f56c6c;
}

.text-primary {
  color: #409eff;
}

.class-info {
  margin-top: 10px;
}
/* 移动端适配 */
@media (max-width: 768px) {
  .personal-center {
    padding: 8px;
  }

  .header {
    height: 50px !important;
    padding: 0 15px;
    font-size: 18px;
    background: linear-gradient(135deg, #2c3e50 0%, #3b5369 100%);
  }

  .el-main {
    padding: 10px;
  }

  .el-row {
    flex-direction: column;
    margin: 0 -8px;
  }

  .el-col {
    width: 100%;
    max-width: 100%;
    padding: 0 8px !important;
  }

  /* 卡片优化 */
  .info-card,
  .stats-card {
    margin-bottom: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  .card-header {
    font-size: 16px;
    padding: 12px 16px;
  }

  /* 表单优化 */
  .el-form {
    padding: 8px;
  }

  .el-form-item {
    margin-bottom: 12px;
    flex-direction: column;
    align-items: flex-start;
  }

  :deep(.el-form-item__label) {
    width: 100% !important;
    text-align: left !important;
    padding-bottom: 4px;
    font-size: 13px;
    color: #606266;
  }

  .el-tag {
    font-size: 13px;
    padding: 6px 10px;
  }

  /* 开关优化 */
  .el-switch {
    transform: scale(0.9);
    transform-origin: left center;
  }

  /* 统计卡片优化 */
  .stats-item {
    padding: 12px 0;
  }

  .stats-label {
    font-size: 13px;
  }

  .stats-value {
    font-size: 22px;
  }

  /* 地址输入框 */
  .el-textarea :deep(.el-textarea__inner) {
    font-size: 13px;
    padding: 8px;
  }
}

/* 小屏手机优化 */
@media (max-width: 480px) {
  .header h1 {
    font-size: 16px;
  }

  .card-header {
    font-size: 15px;
  }

  .stats-value {
    font-size: 20px;
  }

  .el-icon {
    font-size: 18px;
  }

  :deep(.el-form-item__content) {
    width: 100%;
  }
}
</style>